import React, { Component } from 'react'
import { Link} from 'react-router-dom'
import { Toast } from 'antd-mobile'
//导入axios
// import axios from 'axios'
import { API } from'../../utils/api'
import { BASE_URL} from '../../utils/url'
// import './index.scss'
import NavHeader from '../../components/NavHeader'
import styles from './index.module.css'
// import { Table } from 'react-virtualized/dist/commonjs/Table'

// 注意：在react脚手架中，全局对象需要使用window来访问，否则，会造成ESLint校验错误，新版本要用BMapGL
//准备上线
const BMapGL = window.BMapGL

// 覆盖物样式
const labelStyle = {
    cursor: 'pointer',
    border: '0px solid rgb(255, 0, 0)',
    padding: '0px',
    whiteSpace: 'nowrap',
    fontSize: '12px',
    color: 'rgb(255, 255, 255)',
    textAlign: 'center'
  }
export default class index extends Component {
    state = {
        //小区下的房源列表
        housesList: [],
        isShowList: false
    }
    componentDidMount(){
       this.initMap()
    }

    //初始化地图
    initMap() {
        //获取当前定位城市
        const { label, value } = JSON.parse(localStorage.getItem('hkzf_city'))
        console.log(label, value);


        //初始化地图实例
        const map = new BMapGL.Map('container')
        //让其他方法中可以用这个对象
        this.map = map
        //设置中心点坐标
        // const point = new window.BMapGL.Point(116.404, 39.915)

        //创建地址解析器实例
        var myGeo = new BMapGL.Geocoder();
        // 将地址解析结果显示在地图上，并调整地图视野
        myGeo.getPoint(label, async  point => {
            if (point) {
                map.centerAndZoom(point, 11);
                //添加常用控件
                map.addControl(new BMapGL.ZoomControl())
                map.addControl(new BMapGL.ScaleControl())

                //调用renderOverlays方法
                this.renderOverlays(value)

            } else {
                alert('您选择的地址没有解析到结果!');
            }
        }, label)
            //给地图绑定移动事件
            map.addEventListener('movestart',()=>{
                if(this.state.isShowList){
                    this.setState({
                        isShowList:false
                    })
                }
            })        
    }

    //渲染覆盖物入口
    async renderOverlays(id){
        try {
            //开启Toast
            Toast.loading('加载中...', 0, null, false)
            const res = await API.get(`/area/map?id=${id}`)
            //关闭loding
            Toast.hide()
            console.log('获取的数据', res);
            const data = res.data.body

            const { nextZoom, type } = this.getTypeAndZoom()

            data.forEach(item => {
                this.createOverlays(item, nextZoom, type)
            })
        } catch (e) {
            Toast.hide()
        }
       
    }

    //创建覆盖物
    createOverlays(data,zoom,type){
        const {
            coord: { latitude, longitude },
            count,
            label: areaName,
            value
        } = data

        //创建坐标对象
        const areaPoint = new BMapGL.Point(longitude, latitude)
        if( type=== 'circle' ){
            //区或镇
            this.createCircle(areaPoint,areaName,count,value,zoom)
        }else{
            //小区
            this.createRect(areaPoint,areaName,count,value)
        }
    }

    //计算要绘制的覆盖物类型和下一个缩放级别
    //区   -> 11 ，范围： >=10 >12
    //镇   -> 13 ，范围： >=12 >14
    //小区  -> 15 ，范围：>=14 >16
    getTypeAndZoom(){
        const zoom = this.map.getZoom()
        let nextZoom , type
        console.log('当前地图缩放级别:',zoom);
        if(zoom >=10 && zoom <12){
            //区 
            //下一个缩放级别
            nextZoom = 13
            //circlr标识绘制圆形覆盖物
            type = 'circle'
        } else if(zoom >=12 && zoom<14){
            nextZoom = 15
            type = 'circle'
        } else if(zoom >= 14 && zoom <16){
            //小区
            type= 'rect'
        }

        return {
            nextZoom,
            type
        }
    }

    createCircle(point,name,count,id,zoom){
        const label = new BMapGL.Label('', {
            position: point, //根据每一个覆盖物的经纬度来进行渲染
            offset: new BMapGL.Size(-35, -35)
        });

        //给label对象添加一个唯一标识
        label.id = id

        //设置房源覆盖物
        label.setContent(`
                      <div class="${styles.bubble}">
                          <p class="${styles.name}">${name}</p>
                          <p>${count}</p>
                      </div>
                  `)
        label.setStyle(labelStyle)
        label.addEventListener('click', () => {
            //放大地图，以当前点击的覆盖物为中心放大地图
            //第一个参数：坐标对象
            //第二个参数：放大级别
            this.renderOverlays(id)
            this.map.centerAndZoom(point, zoom)
            //清除当前覆盖物信息
            setTimeout(() => {
                this.map.clearOverlays()
            }, 0)
            
        })
        //添加覆盖物到地图中
        this.map.addOverlay(label)
    }

    createRect(point,name,count,id){
        const label = new BMapGL.Label('', {
            position: point, //根据每一个覆盖物的经纬度来进行渲染
            offset: new BMapGL.Size(-50, -28)
        });

        //给label对象添加一个唯一标识
        label.id = id

        //设置房源覆盖物
        label.setContent(`
        <div class="${styles.rect}">
          <span class="${styles.housename}">${name}</span>
          <span class="${styles.housenum}">${count}套</span>
          <i class="${styles.arrow}"></i>
        </div>
      `)
        label.setStyle(labelStyle)
        label.addEventListener('click', () => {
           
            this.getHousesList(id)
            // console.log('点击了小区', window.event);
            // const {clientX,clientY} = window.event.changedTouches
            // this.map.panBy(
            //     window.innerWidth/2 - clientX,
            //     (window.innerHeight - 330)/2 - clientY
            // )
        })
        //添加覆盖物到地图中
        this.map.addOverlay(label)
    }

    //获取小区房源数据
    async getHousesList(id) {
        try {
            Toast.loading('加载中...', 0, null, false)
            const res = await API.get(`/houses?cityId=${id}`)
            Toast.hide()
            console.log('小区房屋房源数据', res);
            this.setState({
                housesList: res.data.body.list,
                isShowList: true
            })
        } catch (e) {
            Toast.hide()
        }

    }

    //封装渲染房屋列表的方法
    renderHousesList(){
        return  this.state.housesList.map(item => (
            <div className={styles.house} key={item.houseCode}>
              <div className={styles.imgWrap}>
                <img
                  className={styles.img}
                  src={ BASE_URL + item.houseImg}
                  alt=""
                />
              </div>
              <div className={styles.content}>
                <h3 className={styles.title}>{item.title}</h3>
                <div className={styles.desc}>{item.desc}</div>
                <div>
                  {item.tags.map((tag,index) => {
                      const tagClass = 'tag' + (index + 1)
                      return  <span
                      className={[styles.tag, styles[tagClass]].join(' ')}
                      key={tag}
                    >
                      {tag}
                    </span>
                  })}
                </div>
                <div className={styles.price}>
                  <span className={styles.priceNum}>{item.price}</span> 元/月
                </div>
              </div>
            </div>
          ))
    }

    render() {
        return (
            <div className={styles.map}>
                    <NavHeader>
                        地图找房
                    </NavHeader>
                <div id="container" className={styles.container} />
                 {/* 房源列表 */}
        {/* 添加 styles.show 展示房屋列表 */}
        <div
          className={[
            styles.houseList,
            this.state.isShowList ? styles.show : ''
          ].join(' ')}
        >
          <div className={styles.titleWrap}>
            <h1 className={styles.listTitle}>房屋列表</h1>
            <Link className={styles.titleMore} to="/home/list">
              更多房源
            </Link>
          </div>

          <div className={styles.houseItems}>
            {/* 房屋结构 */}
           {this.renderHousesList()}
          </div>
        </div>
            </div>  
        )
    }
}
